<script setup>
import keepAliveExclude from '@/reactive/index.js';
import { ref } from 'vue';
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';

const router = useRouter();
const route = useRoute();

const tabs = [
  { label: 'tab1', path: 'tab1' },
  { label: 'tab2', path: 'tab2' },
  { label: 'tab3', path: 'tab3' },
];
const tabActive = ref('');

const setTabActive = (currentRoute) => {
  const paths = currentRoute.path.split('/');
  tabs.some((item) => {
    if (paths.includes(item.path)) {
      tabActive.value = item.path;
      return true;
    }
  });
};
setTabActive(route);

onBeforeRouteUpdate((to) => {
  setTabActive(to);
});

const tabJump = (tab) => {
  tabActive.value = tab.path;
  router.push(`/design/${tab.path}`);
};
</script>

<template>
  <h3>指南</h3>

  <div class="tabs">
    <div class="tabs-header">
      <div
        v-for="item in tabs"
        :key="item.path"
        class="tab-item"
        :class="{ active: tabActive === item.path }"
        @click="tabJump(item)"
      >
        {{ item.label }}
      </div>
    </div>

    <div class="tabs-content">
      <RouterView v-slot="{ Component }">
        <KeepAlive :exclude="keepAliveExclude">
          <component :is="Component" />
        </KeepAlive>
      </RouterView>
    </div>
  </div>
</template>

<style scoped>
.tabs {
  .tabs-header {
    display: flex;
    gap: 20px;

    .tab-item {
      border: 1px solid #999;
      padding: 4px 10px;
      border-radius: 4px;
      cursor: pointer;

      &.active {
        background-color: aquamarine;
      }
    }
  }
}
</style>
